<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="header(nav,index)">

    <script type="text/javascript" src="/static/pc/js/jump.js"></script>

    <header class="header-box flex-box">
        <a class="logo" href="/index.html"><img src="/static/pc/images/logo.png"></a>
        <nav class="nav-box">
            <a th:class="${(nav=='index')?'active':''}" href="/">首页</a>
            <a th:class="${(nav=='self')?'active':''}" href="/self.html">自营产品</a>
            <a th:class="${(nav=='agency')?'active':''}" href="/agency.html">合作品牌</a>
            <a th:class="${(nav=='about')?'active':''}" href="/about.html">公司简介</a>
            <a th:class="${(nav=='contact')?'active':''}" href="/contact.html">联系我们</a>
            <p class="line" th:style="'transform: translateX('+${index*112+6}+'px)'"></p>

        </nav>
        <form id="searchForm" action="/self.html" method="get">
            <div class="nav-search-box">
                <span class="text">产品</span>
                <span class="split"></span>
                <input id="keyword" type="text" placeholder="输入关键字进行搜索" name="keyword"><span
                    class="search_btn"></span>
            </div>
        </form>
    </header>

</th:block>